<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>

        <span>筛选</span>&nbsp;
        <el-select style="width: 150px" clearable class="form_width" v-model="where.search_field">
          <el-option v-for="(item,index) in searchInfo.search_field_list" :key="index" :label="item"
                     :value="index"/>
        </el-select> &nbsp;&nbsp;
        <el-input
          clearable
          style="width: 220px"
          v-model="where.search_value"
          placeholder="多个请用;隔开"/>&nbsp;&nbsp;

        <span>评价星级</span>&nbsp;
        <el-select style="width: 120px" clearable class="form_width" v-model="where.star_rating">
          <el-option v-for="item in searchInfo.star_rating_list" :key="item.val" :label="item.label"
                     :value="item.val"/>
        </el-select>&nbsp;&nbsp;

        <span>用户类型</span>&nbsp;
        <el-select style="width: 180px" clearable class="form_width" v-model="where.status">
          <el-option v-for="(item,index) in searchInfo.user_type_list" :key="index" :label="item"
                     :value="index"/>
        </el-select>&nbsp;&nbsp;

        <span>激活时间</span>&nbsp;
        <el-date-picker
          v-model="where.activate_time"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00']">
        </el-date-picker>&nbsp;&nbsp;
        <span>品牌</span>&nbsp;
        <el-select style="width: 180px" clearable class="form_width" v-model="where.brand_code">
          <el-option v-for="(item,index) in searchInfo.brand_list" :key="index" :label="item"
                     :value="item"/>
        </el-select>&nbsp;&nbsp;
        <br/>
        <br/>

        <span>购买时间</span>&nbsp;
        <el-date-picker
          v-model="where.purchase_time"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00']">
        </el-date-picker>&nbsp;&nbsp;

        <span>激活状态</span>&nbsp;
        <el-select style="width: 180px" clearable filterable  class="form_width" v-model="where.progress_activate_select">
          <el-option v-for="(item,index) in searchInfo.progress_activate_list" :key="index" :label="item"
                     :value="index"/>
        </el-select>&nbsp;&nbsp;

        <span>店铺账号</span>&nbsp;
        <el-select style="width: 180px" clearable filterable multiple class="form_width" v-model="where.account">
          <el-option v-for="(item,index) in searchInfo.account_list" :key="index" :label="item.platform_user_name"
                     :value="item.user_account"/>
        </el-select>&nbsp;&nbsp;

        <span>标签</span>&nbsp;
        <el-select style="width: 180px" clearable filterable multiple class="form_width" v-model="where.tag">
          <el-option v-for="(item,index) in searchInfo.tag_list" :key="index" :label="item.tag_name"
                     :value="item.id"/>
        </el-select>&nbsp;&nbsp;

        <span>分类</span>&nbsp;
        <el-select style="width: 150px" clearable filterable multiple class="form_width" v-model="where.category_name">
          <el-option v-for="(item,index) in searchInfo.category_list" :key="index" :label="item.product_category_name1"
                     :value="item.product_category_name1"/>
        </el-select>&nbsp;&nbsp;
        <br/>
        <br/>
        <span>国家</span>&nbsp;
        <el-select style="width: 180px" clearable filterable multiple class="form_width" v-model="where.country">
          <el-option v-for="(item,index) in searchInfo.country_list" :key="index" :label="item"
                     :value="index"/>
        </el-select>&nbsp;&nbsp;
        <span>是否发送邮件</span>&nbsp;
        <el-select style="width: 180px" clearable class="form_width" v-model="where.send_email">
          <el-option v-for="(item) in searchInfo.send_email_list" :key="item.val" :label="item.label"
                     :value="item.val"/>
        </el-select>&nbsp;&nbsp;

          <el-button
            type="primary"
            icon="el-icon-search"
            class="ele-btn-icon"
            @click="reload(1)">查询
          </el-button>
          <el-button @click="reset">重置</el-button>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 395px)">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="removeBatch"
            v-if="permission.includes('sys:activate:dall')">删除
          </el-button>
          <el-button
            size="small"
            type="primary"
            class="ele-btn-icon"
            @click="matchCommentInfo"
            >匹配当前页留评信息
          </el-button>
          <el-button
            size="small"
            type="primary"
            class="ele-btn-icon"
            @click="groupSendEmail"
            >群发邮件
          </el-button>

          <el-button
            size="small"
            class="ele-btn-icon"
            type="success"
            @click="addTagBatch"
          >批量打标签</el-button>

          <el-button
            @click="exportData"
            type="primary"
            icon="el-icon-download"
            class="ele-btn-icon"
            size="small">导出
          </el-button>

        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-view"
            @click="openDetail(row)">详情
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此记录吗？"
            @confirm="remove(row)">
            <el-link
              type="danger"
              slot="reference"
              :underline="false"
              icon="el-icon-delete"
              v-if="permission.includes('sys:activate:delete')">删除
            </el-link>
          </el-popconfirm>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-message"
            @click="sendEmail(row)">发送邮件
          </el-link>

        </template>
        <template slot="name" slot-scope="{row}">
          <span>{{ row.name }}</span>
          <br/>
          <span v-html="row.email" style="color: #05b15a;cursor: pointer" title="点击复制邮箱"
                @click="copyEmail(row.email)"></span>
          <br/>
          <el-link
            type="primary"
            slot="reference"
            :underline="false"
            @click="addTag(row)"
            icon="el-icon-collection-tag">设置标签
          </el-link>
        </template>
        <template slot="order_id" slot-scope="{row}">
          <span style="color: #05b15a;text-decoration: underline;cursor: pointer" title="查看详情"
                @click="openDetail(row)">{{ row.order_id }}</span>
        </template>
        <template slot="status" slot-scope="{row}">
          <div v-if="row.status ===0">
            <el-tag type="info">买家未走完流程</el-tag>
          </div>
          <div v-if="row.status ===1">
            <el-tag>待发送礼品</el-tag>
          </div>
          <div v-if="row.status ===2">
            <el-tag type="success">已发送礼品</el-tag>
          </div>
        </template>
        <template slot="customer_confirm_for_review" slot-scope="{row}">
          <div v-if="row.customer_confirm_for_review ===1">未确认</div>
          <div v-if="row.customer_confirm_for_review ===2">是</div>
          <div v-if="row.customer_confirm_for_review ===3">否</div>
          <div v-if="row.customer_confirm_for_review ===4">已手动确认</div>
        </template>
        <template slot="comment_retention_results" slot-scope="{row}">
          <div v-if="row.comment_retention_results ===0">-</div>
          <div v-if="row.comment_retention_results ===1">
            <el-button
              type="primary"
              icon="el-icon-check"
              class="el-button el-button--success el-button--mini"
              @click="matchRetention(row)">查看
            </el-button>
          </div>
          <div v-if="row.comment_retention_results ===100">
            <el-button
              type="primary"
              icon="el-icon-thumb"
              class="ele-btn-icon"
              @click="matchRetention(row)">查看
            </el-button>
          </div>
        </template>
        <!-- 标签 -->
        <template slot="tag_list" slot-scope="{row}">
          <div v-if="row.tag_list.length>0" style="max-height: 70px;overflow:scroll" >
            <el-tag style="margin-left: 1px"  v-for="(item,index) in row.tag_list" :key="index" :type=item.tag_color>{{item.tag_name}}</el-tag>
          </div>
        </template>
        <template slot="current_progress" slot-scope="{row}">
          <ul
            style="padding: 0 0 0 25px;margin: 0;font-weight: 600;font-size: 12px;line-height: 1.4;padding-left: 25px;padding-right: 45px">
            <li :style="{'color': row.progress_activate ? 'rgb(103, 194, 58)' : 'rgb(183, 183, 183)' }">已激活</li>
            <li :style="{'color': row.progress_confirm_gift ? 'rgb(103, 194, 58)' : 'rgb(183, 183, 183)' }">确认礼品</li>
            <li :style="{'color': row.progress_star_rating_evaluation ? 'rgb(103, 194, 58)' : 'rgb(183, 183, 183)' }">星级评价</li>
            <li :style="{'color': row.progress_bad_reviews ? 'rgb(103, 194, 58)' : 'rgb(183, 183, 183)' }">系统留评中差评</li>
            <li :style="{'color': row.progress_favorable_comment ? 'rgb(103, 194, 58)' : 'rgb(183, 183, 183)' }">系统留评好评</li>
            <li :style="{'color': row.progress_write_address ? 'rgb(103, 194, 58)' : 'rgb(183, 183, 183)' }">填写收货地址</li>
          </ul>
          <el-button size="small" v-if="row.status !==2" @click="handEndProgress(row.id)">手动结束进度</el-button>
        </template>
        <template slot="alerady_send_auto_email" slot-scope="{row}">
          <div v-if="row.alerady_send_auto_email==1">是</div>
          <div v-else>否</div>
        </template>

        <template slot="remarks" slot-scope="{row}">
          <el-input
            v-model="row.remarks"
            placeholder=""
            :rows="1"
            @change="submitRemarks(row.id,row.remarks)"
            type="textarea"/>
        </template>
      </ele-pro-table>
    </el-card>

    <activate-detail
      v-if="showDetail"
      @close="showDetail=false"
      :data="current"
      :visible="showDetail"
      ref="activateRef"
      @done="closeDetail"/>

    <!-- 发送邮件 -->
    <send-email
      :data="current"
      :visible.sync="showSendEmail"
      ref="sendEmailRef"
      @done="reload"/>
    <!--添加标签-->
    <add-tag
      :data="current"
      :visible.sync="showAddTag"
      ref="addTagRef"
      @done="reload"/>

    <!--批量添加标签-->
    <add-tag-batch
      :data="current"
      :visible.sync="showAddTagBatch"
      ref="addTagBatchRef"
      @done="reload"/>

    <match-detail
      :data="current"
      :visible.sync="showMatchDetail"
      ref="matchDetailRef"
      @done="reload"/>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import ActivateDetail from "@/views/orderandcustomers/activate/activate-detail";
import SendEmail from "@/views/orderandcustomers/send-email";
import AddTag from "@/views/orderandcustomers/activate/add-tag";
import MatchDetail from "@/views/orderandcustomers/activate/match-detail";
import AddTagBatch from "@/views/orderandcustomers/activate/add-tag-batch";
import XLSX from "xlsx";

export default {
  name: 'ActivateIndex',
  components: {AddTagBatch, AddTag, SendEmail, ActivateDetail,MatchDetail},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      showViewer: false,//打开预览/关闭
      // 表格数据接口
      url: '/activate/index?progress_activate=1',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: "left"
        },
        {
          prop: 'activate_time',
          label: '激活(北京)时间',
          minWidth: 130,
          align: 'center',
        },
        {
          columnKey: 'name',
          label: '姓名/邮箱',
          align: 'center',
          minWidth: 150,
          slot: 'name'
        },
        {
          columnKey: 'tag_list',
          label: '标签',
          align: 'center',
          minWidth: 150,
          slot: 'tag_list'
        },
        {
          prop: 'order_id',
          label: '订单号',
          minWidth: 130,
          align: 'center',
          slot: 'order_id'
        },
        {
          prop: 'platform_sku',
          label: 'Sku',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'asin',
          label: 'Asin',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'progress_activate_html',
          label: '激活状态',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'product_category_name',
          label: '分类',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'brand_code',
          label: '品牌',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'product_title',
          label: '产品名称',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'account',
          label: '店铺账号',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'create_user_name',
          label: '创建用户',
          minWidth: 130,
          align: 'center',
        },
        // {
        //   prop: 'status',
        //   label: '状态',
        //   minWidth: 130,
        //   align: 'center',
        //   slot: 'status'
        // },

        // {
        //   prop: 'customer_confirm_for_review',
        //   label: '客户确认留评(需核实)',
        //   minWidth: 130,
        //   align: 'center',
        //   slot: 'customer_confirm_for_review'
        // },
        {
          prop: 'comment_retention_results',
          label: '留评匹配结果',
          minWidth: 130,
          align: 'center',
          slot: 'comment_retention_results'
        },
        {
          prop: 'user_type_html',
          label: '用户类型',
          minWidth: 130,
          align: 'center'
        },
        {
          prop: 'current_progress',
          label: '当前进度',
          minWidth: 200,
          align: 'center',
          slot: 'current_progress'
        },
        {
          prop: 'evaluate_star_rating',
          label: '评价星级',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'alerady_send_auto_email',
          label: '是否发送邮件',
          minWidth: 130,
          align: 'center',
          slot: 'alerady_send_auto_email'
        },
        {
          prop: 'send_email_count',
          label: '发送邮件次数',
          minWidth: 130,
          align: 'center',
        },
        {
          prop: 'remarks',
          label: '备注',
          minWidth: 170,
          align: 'center',
          slot: 'remarks'
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      // 表格搜索条件
      where: {
        page:0,
        limit:10,
        search_field:'order_id'
      },
      // 表格选中数据
      selection: [],
      //搜索下拉数据
      searchInfo: {},
      //匹配留评信息对象
      matchDetail:[],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showDetail: false,
      showSendEmail:false,
      showAddTag:false,
      showAddTagBatch:false,
      showMatchDetail:false
    };
  },
  mounted() {
    //获取查询条件配置
    this.activateConfig();
  },
  methods: {
    closeViewer() { //关闭
      this.showViewer = false
    },
    /* 刷新表格 */
    reload(pageSign) {
      if (pageSign) this.where.page =1;
      this.$refs.table.reload({where: this.where});
    },


    //群发邮件
    groupSendEmail()
    {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$refs.sendEmailRef.setActivateIds(this.selection.map(d => d.id));
      this.showSendEmail = true;
    },
    //匹配结果详情查看
    matchRetention(row)
    {
      this.current = row;
      this.showMatchDetail = true;
    },
    matchCommentInfo()
    {
      var map_ids = [];
      this.$refs.table.data.forEach(function(item) {
        if (item.comment_retention_results !=1){
          map_ids.push(item.id);
        }
      })

      this.$http.post('/activate/matchCommentInfo', {ids: map_ids}).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          var matchCommentList = res.data.data;

          this.$refs.table.data.forEach(function(item) {
            if (matchCommentList[item.id] !=undefined){
              item.match_comment_list = matchCommentList[item.id];
              item.comment_retention_results = 100;
            }
          })
          // this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
      // this.selection.map(d => d.id)
    },
    closeDetail() {
      this.showDetail = false;
    },
    //获取查询条件配置
    activateConfig() {
      this.$http.get('/activate/activateConfig', this.form).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.searchInfo = res.data.data;
        } else {
          this.$message({type: 'error', message: res.data.msg, offset: 160});
        }
      });
    },
    /* 手动结束进度 */
    handEndProgress(id) {
      this.$confirm('您已核实确认客户实际已留评??', '注意', {
        type: 'warning'
      }).then(() => {
        this.$http.post('/activate/handEndProgress', {id: id}).then(res => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    copyEmail(email) {
      this.$copyText(email);
    },
    //修改备注
    submitRemarks(id, remarks) {
      this.$http.post('/activate/submitRemarks', {id: id, remarks: remarks}).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //查看详情
    openDetail(row) {
      this.current = row;
      this.showDetail = true;
    },
    /*发送邮件弹窗*/
    sendEmail(row)
    {
      this.current = row;
      this.$refs.sendEmailRef.setActivateIds([row.id]);
      this.showSendEmail = true;
    },
    //单个添加标签
    addTag(row)
    {
      this.current = row;
      this.showAddTag = true;
      this.$refs.addTagRef.setTagInfo(row);
    },
    //批量添加标签
    addTagBatch()
    {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.showAddTagBatch = true;
      this.$refs.addTagBatchRef.setTagBatchInfo(this.selection.map(d => d.id));
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({lock: true});
      this.$http.post('/activate/delete', {id: row.id}).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          this.reload();
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的数据吗?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({lock: true});
        this.$http.post('/activate/delete', {id: this.selection.map(d => d.id)}).then(res => {
          loading.close();
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.reload();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }).catch(() => {
      });
    },
    /* 更改状态 */
    editStatus(row) {
      const loading = this.$loading({lock: true});
      let params = Object.assign({
        "id": row.id,
        "status": row.status
      })
      this.$http.post('/activate/status', params).then(res => {
        loading.close();
        if (res.data.code === 0) {
          this.$message({type: 'success', message: res.data.msg});
        } else {
          row.status = !row.status ? 1 : 2;
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    /* 导出数据 */
    exportData() {
      var ass = this.where;
      ass.page=1;
      ass.limit=50000;

      let array = [['激活(北京)时间', '姓名', '邮箱','订单号','买家姓名','Sku','Asin','激活状态','分类','品牌','产品名称','店铺账号','创建用户','用户类型','评价星级','是否发送邮件',
      '礼品信息','收货邮箱','收货地址','收货城市','收货省/州','收货邮编','收货国家','国家市场','订单总额','折扣价','用户评论','访客ip','访客国家','访客平台','访客浏览器',
      '访问设备','访问域名','访问时间']];
      const loading = this.$loading({lock: true});
      this.$http.get(this.url,{
        params:ass
      }).then(res => {
        loading.close();
        if (res.data.code === 0) {
          res.data.data.forEach(d => {
            array.push([
              d.activate_time,
              d.name,
              d.email,
              d.order_id,
              d.order_name,
              d.platform_sku,
              d.asin,
              d.progress_activate_html,
              d.product_category_name,
              d.brand_code,
              d.product_title,
              d.account,
              d.create_user_name,
              d.user_type_html,
              d.evaluate_star_rating,
              ['否','是'][d.alerady_send_auto_email],
              d.gift_name+['常规礼品','其他礼品'][d.gift_type_2-1],
              d.take_over_postal_code,
              d.take_over_address,
              d.take_over_city,
              d.take_over_state,
              d.take_over_postal_code,
              d.take_over_country,
              d.order_country,
              d.all_price,
              d.discount,
              d.comment,
              d.record_list.ip,
              d.record_list.country,
              d.record_list.visitors_platform,
              d.record_list.browser,
              ['移动端','PC端'][d.record_list.is_mobile - 1],
              d.record_list.referrer,
              d.record_list.create_time,
            ]);
          });
          this.$util.exportSheet(XLSX, array, '激活买家管理');
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
  }
}
</script>

<style scoped>

</style>
